<script setup>
import { ref, onMounted } from 'vue'
import { useAuthStore } from '../stores/auth'
import { useAiApiStore } from '../stores/aiApi'

const authStore = useAuthStore()
const aiApi = useAiApiStore()
const messages = ref([])
const newMessage = ref('')
const imageFile = ref(null)
const imagePreview = ref('')
const imageBase64 = ref('')
const loading = ref(false)

const clearImage = () => {
  imagePreview.value = ''
  imageBase64.value = ''
  imageFile.value = null
}

const convertToBase64 = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(file)
  })
}

const handleImageUpload = async (event) => {
  const file = event.target.files[0]
  if (file) {
    try {
      imageFile.value = file
      imagePreview.value = URL.createObjectURL(file)
      imageBase64.value = await convertToBase64(file)
    } catch (error) {
      console.error('图片转换失败:', error)
    }
  }
}

const sendMessage = async () => {
  if (!newMessage.value && !imageFile.value) return
  if (loading.value) return // 防止重复发送
  
  loading.value = true
  try {
    // 添加用户消息到对话历史
    const userMessage = {
      type: 'user',
      content: newMessage.value,
      image: imagePreview.value,
      image_code: imageBase64.value
    }
    messages.value.push(userMessage)
    
    // 调用AI API
    const response = await aiApi.sendRequest(messages.value)
    
    // 添加AI响应到对话历史
    messages.value.push({
      type: 'assistant',
      content: response.content
    })
    
    // 清空输入
    newMessage.value = ''
    imageFile.value = null
    imagePreview.value = ''
    imageBase64.value = ''
    
  } catch (error) {
    console.error('发送消息失败:', error)
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <div class="chat-container">
    <header class="chat-header">
      <div class="header-content">
        <h1>多模态内容理解系统</h1>
        <button class="btn btn-logout" @click="authStore.logout">
          <span class="logout-icon">⎋</span>
          退出登录
        </button>
      </div>
    </header>
    
    <main class="chat-main">
      <div class="messages-container">
        <div v-if="messages.length === 0" class="empty-state">
          <div class="empty-icon">🤖</div>
          <h2>开始您的多模态对话</h2>
          <p>上传图片并提出问题，AI 将为您分析图片内容</p>
        </div>
        
        <div v-for="(message, index) in messages" 
             :key="index"
             :class="['message', message.type]">
          <div class="avatar">
            {{ message.type === 'user' ? '👤' : '🤖' }}
          </div>
          <div class="message-content">
            <img v-if="message.image" :src="message.image" class="message-image">
            <p>{{ message.content }}</p>
          </div>
        </div>
      </div>
    </main>
    
    <footer class="chat-footer">
      <div class="input-container">
        <div class="toolbar">
          <label class="upload-btn">
            <input
              type="file"
              accept="image/*"
              @change="handleImageUpload"
              class="hidden"
            >
            <span class="upload-icon">📷</span>
            上传图片
          </label>
        </div>
        
        <div v-if="imagePreview" class="image-preview">
          <img :src="imagePreview">
          <button class="remove-image" @click="clearImage">×</button>
        </div>
        
        <div class="message-input-wrapper">
          <textarea
            v-model="newMessage"
            class="message-input"
            placeholder="描述您对图片的问题..."
            @keyup.enter.prevent="sendMessage"
            :disabled="loading"
            rows="1"
          ></textarea>
          <button 
            class="btn btn-primary send-btn"
            @click="sendMessage"
            :disabled="loading || (!newMessage)"
          >
            <span class="send-icon">{{ loading ? '⏳' : '↗️' }}</span>
            {{ loading ? '发送中...' : '发送' }}
          </button>
        </div>
      </div>
    </footer>
  </div>
</template>

<style scoped>
.chat-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--background-color);
}

.chat-header {
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-header h1 {
  font-size: 20px;
  font-weight: 600;
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-logout {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--text-color);
  font-size: 14px;
  padding: 8px 16px;
}

.btn-logout:hover {
  background: rgba(0, 0, 0, 0.05);
}

.chat-main {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.messages-container {
  max-width: 800px;
  margin: 0 auto;
}

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: #666;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-state h2 {
  font-size: 24px;
  margin-bottom: 8px;
  color: var(--text-color);
}

.empty-state p {
  font-size: 16px;
  color: #666;
}

.message {
  margin-bottom: 24px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.message.user {
  flex-direction: row-reverse;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  font-size: 20px;
}

.message-content {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 12px;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.message.user .message-content {
  background: var(--primary-color);
  color: white;
}

.message-image {
  max-width: 300px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.chat-footer {
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-color);
}

.input-container {
  max-width: 800px;
  margin: 0 auto;
}

.toolbar {
  margin-bottom: 12px;
}

.upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--background-color);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.upload-btn:hover {
  background: #e5e5e7;
}

.upload-icon {
  font-size: 18px;
}

.hidden {
  display: none;
}

.image-preview {
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
}

.image-preview img {
  max-width: 200px;
  max-height: 200px;
  border-radius: 8px;
  border: 2px solid var(--primary-color);
}

.remove-image {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.message-input-wrapper {
  display: flex;
  gap: 12px;
  background: white;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.message-input {
  flex: 1;
  min-height: 44px;
  max-height: 120px;
  padding: 12px;
  border: none;
  border-radius: 8px;
  resize: none;
  font-family: inherit;
  font-size: 16px;
  background: transparent;
}

.message-input:focus {
  outline: none;
}

.message-input:disabled {
  background-color: #f5f5f7;
  cursor: not-allowed;
}

.send-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 100px;
  justify-content: center;
}

.send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #ccc;
}

.send-btn:disabled:hover {
  background-color: #ccc;
}

.send-icon {
  font-size: 18px;
}

@media (max-width: 768px) {
  .chat-header,
  .chat-footer {
    padding: 12px 16px;
  }
  
  .chat-main {
    padding: 16px;
  }
  
  .message-content {
    max-width: 85%;
  }
  
  .message-image {
    max-width: 200px;
  }
  
  .send-btn {
    min-width: 80px;
  }
}
</style> 